<template>
    <div class="top_container">
        <div class="left_top">
            <i @click="Clickfold" class="custom-icon custom-icon-icon-test39"></i>
            <el-breadcrumb separator>
                <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
              <i class="custom-icon iconitem" :class="item.meta.icon" ></i>
                    <span>{{ item.meta.title }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right_top">
            <div class="navfunction">
                <el-icon @click="TapQuanping">
                    <i class="custom-icon custom-icon-quanping"></i>
                </el-icon>
                <el-icon @click="TapShezhi">
                    <i class="custom-icon custom-icon-shezhi"></i>
                </el-icon>
                <div class="userimg"><img :src="store.state.qi_user.info.avatar||'@/assets/vue.svg'" /></div>
                <text>{{ vuexuser.name }}</text>
                <el-dropdown>
                    <el-icon><arrow-down /></el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="outgoin">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>

        <el-drawer v-model="drawer" title="主题设置">
            <el-form>
                <el-form-item label="主题颜色">
                    <el-color-picker @change="setColor" size="small" v-model="colorpick" show-alpha />
                </el-form-item>
                <el-form-item label="暗黑模式">
                    <el-switch @change="changeDark" v-model="switchval" size="small" inline-prompt active-icon="Sunny"
                        inactive-icon="Moon" />
                </el-form-item>
            </el-form>

        </el-drawer>
    </div>
</template>
<script setup>
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router'
import { ref,reactive } from 'vue'
import {removeToken} from '@/utils/setToken.js'
let drawer = ref(false)
let colorpick = ref('#409EFF')
let switchval = ref(false)
const router = useRouter()
const route = useRoute()
let store = useStore()
let vuexuser = reactive({
    img: store.state.qi_user.info.avatar,
    name:store.state.qi_user.info.name
})
let fold = ref(false)
const Clickfold = () => {
    fold.value = !fold.value
    store.commit('qi_user/updatefold', fold.value);
}
const TapQuanping = () => {
    // console.log(document.fullscreenElement);
    let full = document.fullscreenElement
    if (!full) {
        document.documentElement.requestFullscreen()
    } else {
        document.exitFullscreen()
    }
}
const TapShezhi = () => {
    drawer.value = true
}
const outgoin = () => {
    // store.commit('qi_user/DELETEINFO');
    removeToken('userinfo')
    removeToken('token')
    // 跳转到登录页
    router.push({ path: '/login', query: { redirect: route.path } })
}
// 暗黑
const changeDark = () => {
    let html = document.documentElement
    switchval.value ? html.className = 'dark' : html.className = ''
    console.log(html);
}
// 颜色
const setColor = () => {
    const html = document.documentElement;
    html.style.setProperty('--el-color-primary', colorpick.value)
}
</script>
<style lang="scss" scoped>
.navfunction {
    width: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.iconitem{
    padding: 0 10px;
}
.top_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    box-shadow: 0 0 10px 0 hsl(0deg 6% 58% / 60%);

    .left_top {
        display: flex;
        align-items: center;
    }

    .right_top {

        // display: flex;
        // align-items: center;
        .userimg {
            padding: 0 10px;
        }

        img {
            border-radius: 50%;
            width: 24px;
            height: 24px;
        }

        i {
            // padding: 0  20px;
            // margin: 0 10px;
            // padding-right: 20px;
        }

    }
}
</style>